<template>
  <view style="width:100%;height:90rpx"></view>
  <view class="center bot">
    <view class="column" v-for="(item,index) in list" :key='item.id' @click="navTo(item.puah)">
      <image :src="active==index?item.icon:item.icons" mode=""></image>
      <text :style="{color:active==index?'#158AF7':''}">{{item.text}}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  const props = defineProps({
    active: String,
  });
  const list=[
    {icon:'../../../static/saleIcon/bottom/icon1.png',
    icons:'../../../static/saleIcon/bottom/icon11.png',
    text:'首页',puah:'Sale/index/index'},
    {icon:'../../../static/saleIcon/bottom/icon2.png',
    icons:'../../../static/saleIcon/bottom/icon22.png',
    text:'客户',puah:'Sale/index/customer'},
    {icon:'../../../static/saleIcon/bottom/icon3.png',
    icons:'../../../static/saleIcon/bottom/icon33.png',
    text:'工作',puah:'Sale/index/module'},
    {icon:'../../../static/saleIcon/bottom/icon4.png',
    icons:'../../../static/saleIcon/bottom/icon44.png',
    text:'钱包',puah:'Sale/index/purse'},
    ]
</script>

<style scoped lang="less">
  .bot{
    width: 100%;
    background:#fff;
    height:90rpx;
    position: fixed;
    z-index: 99;
    bottom: 0px;
    left: 0px;
    justify-content: space-around;
    image{
      width: 40rpx;
      height: 40rpx;
    }
    text{
      font-size: 24rpx;
      margin-top:2rpx;
    }
  }
</style>